import {useState,useEffect} from 'react'
import { EditOutlined ,CheckOutlined,CloseOutlined} from "@ant-design/icons";
import {Input,Space} from 'antd'
function EditText(props){
    const [v,setV] = useState("");
    const [state,setState] = useState(props.state||'view');
    const callback = props.cb?props.cb:()=>{}
    const cancel = props.cancel?props.cancel:()=>{}
    function finishCallback(){
        callback(v);
    }

    function onCancel(){
        setV(props.value);
        setState('view');
        cancel();
    }


    function pageInit(){
        if(props.value){
            setV(props.value);
        }
    }

    useEffect(()=>{
        pageInit();
    },[]) 
    
    return (
        <>
        {state==='view'? 
        <>{v}  <EditOutlined style={{color:"#1677ff",cursor:"pointer"}} onClick={()=>{setState('edit')}}/></>
        :
        <Space>
            <Input style={{width:"auto"}} value={v} onChange={(e)=>{setV(e.target.value)}}/> 
            <CheckOutlined  style={{color:"#1677ff",cursor:"pointer"}} onClick={()=>{finishCallback();setState('view')}}/>
            <CloseOutlined  style={{color:"#1677ff",cursor:"pointer"}} onClick={onCancel}/>
        </Space>}
            
    </>
    )
}

export default EditText;